<template>
  <div v-if="show">
    <a-form label-position="top" class="widget-config-form">
      <a-form-item label="字段标识" v-if="data.type != 'grid' && data.type != 'divider' && data.type != 'tabs' && data.type != 'html'">
        <a-input v-model="data.model"></a-input>
      </a-form-item>
      <a-form-item label="标题" v-if="data.type != 'grid' && data.type != 'tabs' && data.type != 'html'">
        <a-input v-model="data.name"></a-input>
      </a-form-item>

      <a-form-item label="占位内容" v-if="data.type == 'html'">
        <div id="htmleditor" ref="htmleditor" style="height: 280px; width: 250px">
          {{ data.options.defaultValue }}
        </div>
      </a-form-item>

      <a-form-item label="风格类型" v-if="data.type == 'tabs'">
        <a-radio-group v-model="data.options.type" button-style="solid">
          <a-radio-button value="line"> 默认 </a-radio-button>
          <a-radio-button value="card"> 选项卡 </a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="选项卡位置" v-if="data.type == 'tabs'">
        <a-radio-group v-model="data.options.tabPosition" button-style="solid">
          <a-radio-button value="top"> 顶部 </a-radio-button>
          <a-radio-button value="left"> 左边 </a-radio-button>
          <a-radio-button value="right"> 右边 </a-radio-button>
          <a-radio-button value="bottom"> 底部 </a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="标签" v-if="data.type == 'tabs'">
        <!-- {{data.columns}} -->
        <draggable
          tag="ul"
          :list="data.columns"
          v-bind="{
            group: { name: 'options' },
            ghostClass: 'ghost',
            handle: '.drag-item'
          }"
          handle=".drag-item"
        >
          <li v-for="(item, index) in data.columns" :key="index">
            <i class="drag-item" style="font-size: 16px; margin: 0 3px 0px 0px; cursor: move">
              <i class="iconfont icon-icon_bars"></i>
            </i>
            <a-input placeholder="标签" size="small" style="width: 95px" v-model="item.label"></a-input>
            -
            <a-input placeholder="标题" size="small" style="width: 95px" v-model="item.name"></a-input>

            <a-button
              v-if="data.columns.length > 1"
              class="radio-options-del"
              @click="handleOptionsRemove(index)"
              shape="circle"
              plain
              type="danger"
              size="small"
              icon="minus"
              style="padding: 4px; margin-left: 5px"
            ></a-button>
          </li>

          <div style="margin-left: 22px">
            <a-button type="link" @click="handleAddTabsColumn"> 添加 </a-button>
          </div>
        </draggable>
      </a-form-item>

      <a-form-item label="标签宽度" v-if="Object.keys(data.options).indexOf('width') >= 0">
        <a-input v-model="data.options.width"></a-input>
      </a-form-item>

      <a-form-item label="自定义属性" v-if="data.type != 'grid' && data.type != 'divider' && data.type != 'tabs' && data.type != 'html'">
        <a-input v-model="data.options.prop"></a-input>
      </a-form-item>

      <a-form-item label="高度" v-if="Object.keys(data.options).indexOf('height') >= 0">
        <a-input v-model="data.options.height"></a-input>
      </a-form-item>

      <a-form-item label="尺寸" v-if="Object.keys(data.options).indexOf('size') >= 0">
        宽
        <a-input style="width: 85px" type="number" v-model.number="data.options.size.width"></a-input>
        高
        <a-input style="width: 85px" type="number" v-model.number="data.options.size.height"></a-input>
      </a-form-item>

      <a-form-item label="输入提示" v-if="Object.keys(data.options).indexOf('placeholder') >= 0 && (data.type != 'time' || data.type != 'date')">
        <a-input v-model="data.options.placeholder"></a-input>
      </a-form-item>
      <a-form-item label="布局方式" v-if="Object.keys(data.options).indexOf('inline') >= 0">
        <a-radio-group v-model="data.options.inline" button-style="solid">
          <a-radio-button :value="false"> 块级 </a-radio-button>
          <a-radio-button :value="true"> 行内 </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="显示输入框" v-if="Object.keys(data.options).indexOf('showInput') >= 0">
        <a-switch v-model="data.options.showInput"></a-switch>
      </a-form-item>
      <a-form-item label="最小值" v-if="Object.keys(data.options).indexOf('min') >= 0">
        <a-input-number v-model="data.options.min" :min="0" :max="99999999999" :step="1"></a-input-number>
      </a-form-item>
      <a-form-item label="最大值" v-if="Object.keys(data.options).indexOf('max') >= 0">
        <a-input-number v-model="data.options.max" :min="0" :max="100" :step="1"></a-input-number>
      </a-form-item>
      <a-form-item label="步长" v-if="Object.keys(data.options).indexOf('step') >= 0">
        <a-input-number v-model="data.options.step" :min="0" :max="100" :step="1"></a-input-number>
      </a-form-item>
      <a-form-item label="是否多选" v-if="data.type == 'select' || data.type == 'imgupload' || data.type == 'treeSelect'">
        <a-switch v-model="data.options.multiple" @change="handleSelectMuliple"></a-switch>
      </a-form-item>
      <a-form-item label="选中项回填的方式" v-if="data.type == 'treeSelect' && data.options.multiple == true">
        <!-- <a-switch
          v-model="data.options.showCheckedStrategy"
          @change="handleSelectMuliple"
        ></a-switch> -->
        <a-select :value="data.options.showCheckedStrategy" style="width: 120px" @change="handleChange">
          <a-select-option :value="1">只显示子节点</a-select-option>
          <a-select-option :value="2">只显示父节点</a-select-option>
          <a-select-option :value="3">显示所有选中节点</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="是否展开树形结构" v-if="data.type == 'treeSelect'">
        <a-switch v-model="data.options.expand" @change="handleSelectMuliple"></a-switch>
      </a-form-item>
      <a-form-item label="是否可搜索" v-if="data.type == 'select' || data.type == 'treeSelect'">
        <a-switch v-model="data.options.filterable"></a-switch>
      </a-form-item>
      <a-form-item label="允许半选" v-if="Object.keys(data.options).indexOf('allowHalf') >= 0">
        <a-switch v-model="data.options.allowHalf"></a-switch>
      </a-form-item>
      <a-form-item label="支持透明度选择" v-if="Object.keys(data.options).indexOf('showAlpha') >= 0">
        <a-switch v-model="data.options.showAlpha"></a-switch>
      </a-form-item>
      <a-form-item label="是否显示标签" v-if="Object.keys(data.options).indexOf('showLabel') >= 0">
        <a-switch v-model="data.options.showLabel"></a-switch>
      </a-form-item>
      <a-form-item label="选项" v-if="Object.keys(data.options).indexOf('options') >= 0 && data.type != 'treeSelect'">
        <a-radio-group v-model="data.options.remote" style="margin-bottom: 10px" button-style="solid">
          <a-radio-button :value="false"> 远端数据 </a-radio-button>
          <a-radio-button :value="true"> 远端数据 </a-radio-button>
        </a-radio-group>
        <!-- 是否从远端获取数据 -->
        <template v-if="data.options.remote">
          <div>
            <a-input addon-before="远端数据" size="small" style="" v-model="data.options.remoteFunc"></a-input>
            <a-input size="small" addon-before="值" style="" v-model="data.options.props.value"></a-input>
            <a-input size="small" addon-before="标签" style="" v-model="data.options.props.label"> </a-input>
          </div>
        </template>
        <template v-else>
          <template v-if="data.type == 'radio' || (data.type == 'select' && !data.options.multiple)">
            <a-radio-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item'
                }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <a-radio :value="item.value" style="margin-right: 5px" class="radio-set">
                    <a-input
                      size="small"
                      :style="{
                        width: data.options.showLabel ? '85px' : '165px',
                        'z-index': '2'
                      }"
                      v-model="item.value"
                    ></a-input>
                    <a-input size="small" style="width: 85px,z-index:2" v-if="data.options.showLabel" v-model="item.label"></a-input>
                  </a-radio>
                  <i class="drag-item minus-circle" style="font-size: 16px; margin: 0 0px; cursor: move">
                    <i class="iconfont icon-icon_bars"></i>
                  </i>
                  <a-button
                    class="radio-options-del"
                    @click="handleOptionsRemove(index)"
                    shape="circle"
                    plain
                    type="danger"
                    size="small"
                    icon="minus"
                    style="padding: 4px; margin-left: 5px"
                  ></a-button>
                </li>
              </draggable>
            </a-radio-group>
            <div style="margin-left: 22px">
              <a-button type="link" @click="handleAddOption"> 添加选项 </a-button>
            </div>
          </template>

          <template v-if="data.type == 'checkbox' || (data.type == 'select' && data.options.multiple) || (data.type == 'treeSelect' && data.options.multiple)">
            <a-checkbox-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item'
                }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <a-checkbox :value="item.value" style="margin-right: 5px" class="checkbox-set">
                    <a-input
                      :style="{
                        width: data.options.showLabel ? '85px' : '160px',
                        'z-index': '2'
                      }"
                      size="small"
                      v-model="item.value"
                    ></a-input>
                    <a-input
                      style="width: 85px,
                        z-index:2"
                      size="small"
                      v-if="data.options.showLabel"
                      v-model="item.label"
                    ></a-input>
                  </a-checkbox>
                  <i class="drag-item" style="font-size: 16px; margin: 0 2px; cursor: move">
                    <i class="iconfont icon-icon_bars"></i>
                  </i>
                  <a-button
                    class="checkbox-options-del"
                    @click="handleOptionsRemove(index)"
                    shape="circle"
                    plain
                    type="danger"
                    size="small"
                    icon="minus"
                    style="padding: 4px; margin-left: 5px"
                  ></a-button>
                </li>
              </draggable>
            </a-checkbox-group>
          </template>

          <template v-if="data.type == 'treeSelect'">
            <a-button type="link" @click="handleSetOption"> 设置选项 </a-button>
          </template>

          <div style="margin-left: 22px" v-if="data.type == '!treeSelect'">
            <a-button type="link" @click="handleAddOption"> 添加选项 </a-button>
          </div>
        </template>
      </a-form-item>

      <a-form-item label="远端数据" v-if="data.type == 'cascader'">
        <div>
          <a-input size="small" style="" addon-before="远端方法" v-model="data.options.remoteFunc"> </a-input>
          <a-input size="small" style="" addon-before="值" v-model="data.options.props.value"> </a-input>
          <a-input size="small" style="" addon-before="标签" v-model="data.options.props.label"> </a-input>
          <a-input size="small" style="" addon-before="子选项" v-model="data.options.props.children"> </a-input>
        </div>
      </a-form-item>

      <a-form-item label="远端数据" v-if="data.type == 'treeSelect'">
        <div>
          <a-input addon-before="远端方法" size="small" style="" v-model="data.options.remoteFunc"></a-input>
          <a-input size="small" addon-before="父ID" style="" v-model="data.options.props.parentId"></a-input>
          <a-input size="small" addon-before="值" style="" v-model="data.options.props.value"></a-input>
          <a-input size="small" addon-before="标签" style="" v-model="data.options.props.label"></a-input>
        </div>
      </a-form-item>

      <a-form-item
        label="默认值"
        v-if="Object.keys(data.options).indexOf('defaultValue') >= 0 && (data.type == 'textarea' || data.type == 'input' || data.type == 'rate' || data.type == 'color' || data.type == 'switch')"
      >
        <a-input v-if="data.type == 'textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></a-input>
        <a-input v-if="data.type == 'input'" v-model="data.options.defaultValue"></a-input>
        <a-rate
          v-if="data.type == 'rate'"
          style="display: inline-block; vertical-align: middle"
          :max="data.options.max"
          :allow-half="data.options.allowHalf"
          v-model="data.options.defaultValue"
        ></a-rate>
        <a-button type="text" v-if="data.type == 'rate'" style="display: inline-block; vertical-align: middle; margin-left: 10px" @click="data.options.defaultValue = 0"> 清空 </a-button>
        <a-color-picker v-if="data.type == 'color'" v-model="data.options.defaultValue" :show-alpha="data.options.showAlpha"></a-color-picker>
        <a-switch v-if="data.type == 'switch'" v-model="data.options.defaultValue"></a-switch>
      </a-form-item>
      <template v-if="data.type == 'time' || data.type == 'date'">
        <a-form-item label="显示类型" v-if="data.type == 'date'">
          <a-select v-model="data.options.type" @change="dateTypeChange">
            <a-select-option value="year">年</a-select-option>
            <a-select-option value="month">月</a-select-option>
            <a-select-option value="week">周</a-select-option>
            <a-select-option value="date">日期</a-select-option>
            <a-select-option value="dateTime">日期时间</a-select-option>
            <a-select-option value="decade">年份区间</a-select-option>
            <a-select-option value="range">日期区间</a-select-option>
            <!-- <a-select-option value="datetimerange">datetimerange</a-select-option>-->
          </a-select>
        </a-form-item>
        <a-form-item label="是否为范围选择" v-if="data.type == 'time'">
          <a-switch v-model="data.options.isRange"></a-switch>
        </a-form-item>
        <a-form-item label="是否获取时间戳" v-if="data.type == 'date'">
          <a-switch v-model="data.options.timestamp"></a-switch>
        </a-form-item>
        <a-form-item label="占位内容" v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')">
          <a-input v-model="data.options.placeholder"></a-input>
        </a-form-item>
        <a-form-item label="开始时间占位内容" v-if="data.options.isRange || data.options.type == 'datetimerange' || data.options.type == 'daterange'">
          <a-input v-model="data.options.startPlaceholder"></a-input>
        </a-form-item>
        <a-form-item label="结束时间占位内容" v-if="data.options.isRange || data.options.type == 'datetimerange' || data.options.type == 'daterange'">
          <a-input v-model="data.options.endPlaceholder"></a-input>
        </a-form-item>
        <a-form-item label="格式">
          <a-input v-model="data.options.format"></a-input>
        </a-form-item>
        <a-form-item label="默认值" v-if="data.type == 'time' && Object.keys(data.options).indexOf('isRange') >= 0">
          <a-time-picker
            key="1"
            style="width: 100%"
            placeholder=""
            v-if="!data.options.isRange"
            v-model="data.options.defaultValue"
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          ></a-time-picker>
          <a-time-picker
            key="2"
            placeholder=""
            v-if="data.options.isRange"
            style="width: 100%"
            v-model="data.options.defaultValue"
            is-range
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          ></a-time-picker>
        </a-form-item>
      </template>

      <template v-if="data.type == 'imgupload'">
        <a-form-item label="最大上传数">
          <a-input type="number" v-model.number="data.options.length"></a-input>
        </a-form-item>
      </template>

      <template v-if="data.type == 'blank'">
        <a-form-item label="绑定数据类型">
          <a-select v-model="data.options.defaultType">
            <a-select-option value="String"> 字符串 </a-select-option>
            <a-select-option value="Object"> 对象 </a-select-option>
            <a-select-option value="Array"> 数组 </a-select-option>
          </a-select>
        </a-form-item>
      </template>

      <template v-if="data.type == 'grid'">
        <a-form-item label="栅格间隔">
          <a-input type="number" v-model.number="data.options.gutter"></a-input>
        </a-form-item>
        <a-form-item label="列配置项（所有列加起来<=24）">
          <draggable
            tag="ul"
            :list="data.columns"
            v-bind="{
              group: { name: 'options' },
              ghostClass: 'ghost',
              handle: '.drag-item'
            }"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.columns" :key="index">
              <i class="drag-item" style="font-size: 16px; margin: 0 5px; cursor: move">
                <i class="iconfont icon-icon_bars"></i>
              </i>
              <a-input placeholder="栅格值" size="small" style="width: 95px" type="number" v-model.number="item.span"></a-input>

              <a-button class="radio-options-del" @click="handleOptionsRemove(index)" shape="circle" plain type="danger" size="small" icon="minus" style="padding: 4px; margin-left: 5px"></a-button>
              <!-- <a-button @click="handleOptionsRemove(index)" circle plain type="danger" size="small" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></a-button> -->
            </li>
          </draggable>
          <div style="margin-left: 22px">
            <a-button type="link" @click="handleAddColumn"> 添加列 </a-button>
          </div>
        </a-form-item>
        <a-form-item label="水平排列方式">
          <a-select v-model="data.options.justify">
            <a-select-option value="start"> 左对齐 </a-select-option>
            <a-select-option value="end"> 右对齐 </a-select-option>
            <a-select-option value="center"> 居中 </a-select-option>
            <a-select-option value="space-around"> 两侧间隔相等 </a-select-option>
            <a-select-option value="space-between"> 两端对齐 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="垂直排列方式">
          <a-select v-model="data.options.align">
            <a-select-option value="top"> 顶部对齐 </a-select-option>
            <a-select-option value="middle"> 居中 </a-select-option>
            <a-select-option value="bottom"> 底部对齐 </a-select-option>
          </a-select>
        </a-form-item>
      </template>

      <template v-if="data.type != 'grid'">
        <a-form-item label="操作属性">
          <!-- ant design vue 暂无完全只读的属性 -->
          <!-- <a-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly>=0">{{fm.config.widget.readonly}}</a-checkbox> -->
          <a-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled') >= 0"> 禁用 </a-checkbox>
          <a-checkbox v-model="data.options.hidden"> 隐藏 </a-checkbox>
          <a-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable') >= 0"> 文本框可输入 </a-checkbox>
          <a-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable') >= 0"> 显示清除按钮 </a-checkbox>
          <a-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"> 使用箭头进行时间选择 </a-checkbox>
          <a-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete') >= 0"> 删除 </a-checkbox>
          <a-checkbox v-model="data.options.isEdit" v-if="Object.keys(data.options).indexOf('isEdit') >= 0"> 编辑 </a-checkbox>
        </a-form-item>
        <a-form-item label="校验">
          <!--  v-if="Object.keys(data.options).indexOf('required' ) >= 0"-->
          <div>
            <a-checkbox v-model="data.options.required"> 必填 </a-checkbox>
          </div>
          <a-select v-if="Object.keys(data.options).indexOf('dataType') >= 0" v-model="data.options.dataType" size="small">
            <a-select-option value="string"> 字符串 </a-select-option>
            <a-select-option value="number"> 数字 </a-select-option>
            <a-select-option value="boolean"> 布尔值 </a-select-option>
            <a-select-option value="integer"> 整数 </a-select-option>
            <a-select-option value="float"> 浮点数 </a-select-option>
            <a-select-option value="url"> URL地址 </a-select-option>
            <a-select-option value="email"> 邮箱地址 </a-select-option>
            <a-select-option value="hex"> 十六进制 </a-select-option>
          </a-select>

          <div v-if="Object.keys(data.options).indexOf('pattern') >= 0">
            <a-input size="small" v-model.lazy="data.options.pattern" style="width: 240px" placeholder="填写正则表达式"></a-input>
          </div>
        </a-form-item>
      </template>
    </a-form>
    <cus-dialog title="设置选项" :visible="setOptionsVisible" @on-close="setOptionsVisible = false" ref="setOptions" width="800px" form :action="false">
      <template>
        <fm-tree :data="data.options.options" :multiple="data.options.multiple" :defaultValue="data.options.defaultValue" :showLabel="data.options.showLabel"></fm-tree>
        <template slot="action">
          <a-button @click="setOptionsVisible = false"> 取消 </a-button>
          <a-button type="primary" @click="saveOptions"> 保存 </a-button>
        </template>
      </template>
    </cus-dialog>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import fmTree from './Tree'
import CusDialog from './CusDialog'
import Editor from 'vue2-ace-editor'

export default {
  components: {
    Draggable,
    fmTree,
    CusDialog
  },
  props: ['data'],
  data() {
    return {
      htmlEditor: null,
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      },
      setOptionsVisible: false
    }
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0) {
        return true
      }
      return false
    }
  },
  methods: {
    dateTypeChange(val) {
      switch (val) {
        case 'year':
          this.data.options.format = 'YYYY'
          break
        case 'month':
          this.data.options.format = 'YYYY-MM'
          break
        case 'week':
          this.data.options.format = 'YYYY-wo'
          break
        case 'date':
          this.data.options.format = 'YYYY-MM-DD'
          break
        case 'dateTime':
          this.data.options.format = 'YYYY-MM-DD HH:mm:ss'
          break
        case 'decade':
          this.data.options.format = 'YYYY'
          break
        case 'range':
          this.data.options.format = 'YYYY-MM-DD HH:mm:ss'
          break
        default:
          this.data.options.format = 'YYYY-MM-DD'
          break
      }
    },
    saveOptions() {},
    handleSetOption() {
      this.setOptionsVisible = true
    },
    handleOptionsRemove(index) {
      if (this.data.type === 'grid' || this.data.type === 'tabs') {
        this.data.columns.splice(index, 1)
      } else {
        this.data.options.options.splice(index, 1)
      }
    },
    handleAddOption() {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: '新选项',
          label: '新选项'
        })
      } else {
        this.data.options.options.push({
          value: '新选项'
        })
      }
    },
    handleAddTabsColumn() {
      const len = this.data.columns.length
      this.data.columns.push({
        name: 'new' + Date.parse(new Date()),
        label: '新标签',
        list: []
      })
    },
    handleAddColumn() {
      this.data.columns.push({
        span: '',
        list: []
      })
    },
    generateRule() {
      this.data.rules = []
      Object.keys(this.validator).forEach((key) => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleSelectMuliple(value) {
      if (value) {
        if (this.data.options.defaultValue) {
          this.data.options.defaultValue = [this.data.options.defaultValue]
        } else {
          this.data.options.defaultValue = []
        }
      } else {
        if (this.data.options.defaultValue.length > 0) {
          this.data.options.defaultValue = this.data.options.defaultValue[0]
        } else {
          this.data.options.defaultValue = ''
        }
      }
    },

    validateRequired(val) {
      if (val) {
        this.validator.required = {
          required: true,
          message: `${this.data.name}必须填写`
        }
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType(val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.type = {
          type: val,
          message: this.data.name + '格式不正确'
        }
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern(val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.pattern = {
          pattern: val,
          message: this.data.name + '格式不匹配'
        }
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    },
    onDragEnter(info) {
      console.log(info)
      // expandedKeys 需要受控时设置
      // this.expandedKeys = info.expandedKeys
    },
    onDrop(info) {
      console.log(info)
      const dropKey = info.node.eventKey
      const dragKey = info.dragNode.eventKey
      const dropPos = info.node.pos.split('-')
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr)
          }
          if (item.children) {
            return loop(item.children, key, callback)
          }
        })
      }
      const data = [...this.data.options.options]

      // Find dragObject
      let dragObj
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1)
        dragObj = item
      })
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, (item) => {
          item.children = item.children || []
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj)
        })
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, (item) => {
          item.children = item.children || []
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.unshift(dragObj)
        })
      } else {
        let ar
        let i
        loop(data, dropKey, (item, index, arr) => {
          ar = arr
          i = index
        })
        debugger
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj)
        } else {
          ar.splice(i + 1, 0, dragObj)
        }
      }
      this.data.options.options = data
    },
    handleChange(e) {
      console.log(e)
      this.data.options.showCheckedStrategy = e
    }
  },
  watch: {
    'data.options.isRange': function (val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue') >= 0) this.data.options.defaultValue = ''
        }
      }
    },
    'data.options.required': function (val) {
      this.validateRequired(val)
    },
    'data.options.dataType': function (val) {
      this.validateDataType(val)
    },
    'data.options.pattern': function (val) {
      this.valiatePattern(val)
    },
    'data.type': function (val) {
      if (val === 'html') {
        this.$nextTick(() => {
          this.htmlEditor = ace.edit('htmleditor')
          this.htmlEditor.session.setMode('ace/mode/html')
          const that = this
          this.htmlEditor.getSession().on('change', function () {
            if (that.data.options) {
              that.data.options.defaultValue = that.htmlEditor.getValue()
            }
          })
        })
      }
    },
    'data.name': function (val) {
      if (this.data.options) {
        this.validateRequired(this.data.options.required)
        this.validateDataType(this.data.options.dataType)
        this.valiatePattern(this.data.options.pattern)
      }
    }
  }
}
</script>